<template>
	<view class="content">
		<view class="title-part"><text>河南农大智慧农业监测系统</text></view>
		<view class="input-part">
			<view class="t-papers">
				<view class="left">
					<image src="../static/icon_011.png" mode="aspectFit" style="width: 20px;height: 20px;margin-top: 20px;"></image>
				</view>
				<input type="text" value="" placeholder="请输入账号" v-model="phone" placeholder-style="color:#C1C1C1"/>
			</view>
			<view class="t-papers">
				<view class="left">
					<image src="../static/icon_012.png" mode="aspectFit" style="width: 20px;height: 20px;margin-top: 20px;"></image>
				</view>
				<input type="password" value="" placeholder="请输入验证码" v-model="pwd" placeholder-style="color:#C1C1C1" />
			</view>
			<view class="next" @tap.stop="login"><button>登录</button></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: "",  //手机号
				pwd: "",  //验证码
			}
		},
		onLoad(e) {
			
		},
		methods: {
		    login(){
				// const telReg = /^1[3456789]\d{9}$/;
				// if(!telReg.test(this.phone)){
				// 	this.$toast.show("请输入正确的手机号");
				// }
				if(this.phone == ''){
					this.$toast.show("请输入账号");
				}else if(this.pwd == ''){
					this.$toast.show("请输入密码");
				}else{
					this.$http.post({
						data: {
							cmd: "merchantLogin",
							phone: this.phone,
							password: this.pwd
						}
					}).then(resJson => {
						console.log(resJson.data)
						this.$toast.show(resJson.data.resultNote);
						if (resJson.data.result == 0) {
							uni.navigateTo({
								url:'/pages/baseMap?id='+resJson.data.uid
							})
						}
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	page{
		width: 100%;
		height: 100%;
		background: -webkit-linear-gradient(#2b5cceFF, #4cabf7FF); /* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(#2b5cceFF, #4cabf7FF); /* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(#2b5cceFF, #4cabf7FF); /* Firefox 3.6 - 15 */
		background: linear-gradient(#2b5cceFF, #4cabf7FF); /* 标准的语法（必须放在最后） */
	}
	.content{
		width: 100%;
		height: 100%;
		background: url(@/static/icon_030.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: 0 0;
		color: #fff;
		overflow: hidden;
		position: relative;
		.title-part {
			position: absolute;
			display: flex;
			justify-content: center;
			width: 100%;
			height: 72px;
			font-size: 40px;
			top: 120px;
			left: auto;
			right: auto;
		}
		.input-part{
			margin: 200px auto 0 auto;
			padding: 20px 30px;
			background-color: #FFFFFF;
			border-radius: 4px;
			width: 50%;
			.t-one{
				margin: 20px 0px;
				text-align: left;
				font-weight:bold;
				font-size: 17px;
			}
			.t-papers{
				width: 100%;
				padding: 20px 0 0 0;
				margin-top: 10px;
				height: 60px;
				border-bottom: 1px solid #E5E5E5;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				color: #000;
				.left{
					width: 20px;
					height: 60px;
				}
				input{
					width:80%;
					font-size: 14px;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					height: 60px;
					margin-left: 10px;
					// padding-right: 30px;
				}
			}
			.next {
				display: flex;
				justify-content: centerr;
				padding: 40px 0 0px 0;
				&>button {
					width: 560px;
					height: 40px;
					background-color: #4cabf7;
					border-radius: 20px;
					line-height: 40px;
					text-align: center;
					color: $uni-bg-color;
					font-size: $uni-font-size-lg;
					background-color: #007AFF;
				}
			}
		}
	}
	

</style>
